<!--
    @author Yancy Zhang
    @date 2022/4/5
    @description 博客后台列表管理 增删改查
-->
<template>
  <div>
    <el-dialog
        title="删除"
        :visible.sync="dialogVisible"
        width="30%"
        >
      <span>确定要删除这篇博客吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmDelete">确 定</el-button>
      </span>
    </el-dialog>
    <el-table
        stripe
        :data="blogList"
        style="width: 100%">
      <el-table-column
          label="日期"
          width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.blog_post_time | formatTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
          show-overflow-tooltip
          prop="blog_title"
          label="标题"
          width="180">
      </el-table-column>
      <el-table-column
          show-overflow-tooltip
          prop="blog_desc"
          label="简述"
          width="600"
      >
      </el-table-column>
      <el-table-column
          prop="blog_type"
          label="分类"
          width="180">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
          background
          layout="prev, pager, next"
          :page-size="pageSize"
          @current-change="pageChange"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {getBlogList, deleteBlog} from "../../http/api";

export default {
  name: "manageBlog",
  data() {
    return {
      blogList: [],
      pageSize: 10,
      currentPage: 1,
      total: 0,
      dialogVisible: false,
      currentBlogId: ''
    }
  },
  created() {
    this.getBlogList(10, 1);
  },
  methods: {
    getBlogList(pageSize, currentPage) {
      getBlogList(pageSize, currentPage).then(res => {
        this.blogList = res.data.blogList;
        this.total = res.data.total;
        this.loading = false;
      })
    },
    pageChange(val) {
      this.currentPage = val;
      this.getBlogList(this.pageSize, this.currentPage);
    },
    handleEdit(index, row) {
      this.$router.push({
        path: '/admin/edit-blog/' + row._id,
      })
    },
    handleDelete(index, row) {
      this.currentBlogId = row._id;
      this.dialogVisible = true;
    },
    confirmDelete(){
      deleteBlog(this.currentBlogId).then(res => {
        this.$message.success('删除成功');
        this.dialogVisible = false;
        this.getBlogList(this.pageSize, this.currentPage);
      }).catch((error) => {
        this.$message.error(error)
      })
    }
  }
}
</script>

<style scoped>
.pagination {
  padding: 20px 0;
  text-align: center;
  overflow: hidden;
}
</style>
